{#layout name="public/layout" /#}
{#load href="__ROOT__/assets/css/companylist.css" /#}
<div class="content_wrapper" id="app">
	<div class="content" v-cloak>
		<div :class="showSelected ? 'filter_combo n_pd' : 'filter_combo'">
			{#if condition="!empty($options_district)"#}
			<div class="filter_line">
				<div class="line_title">所在地区：</div>
				<div class="line_item">
					<a href="{#:P(['d1'=>null,'d2'=>null,'d3'=>null])#}"
						class="f_item {#if condition='$Request.param.d1==""'#}active{#/if#}">不限</a>
					<a href="javascript:;" class="f_item back classifyReturn" data-type="cityReturn"
						style="display: none">上级</a>
					<span id="cityLinkArea">
						{#volist name="options_district" id="vo"#}
						<a href="{#$vo.url#}"
							class="f_item cityLink {#if condition='$Request.param.d3==$vo.id'#}active{#/if#}">{#$vo.text#}</a>
						{#/volist#}
					</span>
					<a href="javascript:;" class="f_item more toggleMore" style="display: none" data-type="cityLink">
						<span>更多</span>
					</a>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
			</div>
			{#/if#}
			<div class="filter_line">
				<div class="line_title">企业性质：</div>
				<div class="line_item">
					<a href="{#:P(['nature'=>null])#}"
						class="f_item {#if condition='!$Request.param.nature'#}active{#/if#}">不限</a>
					{#volist name="options_nature" id="vo"#}
					<a href="{#:P(['nature'=>$key])#}"
						class="f_item {#if condition='$Request.param.nature==$key'#}active{#/if#}">{#$vo#}</a>
					{#/volist#}
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
			</div>
			<div class="filter_line">
				<div class="line_title">行业类别：</div>
				<div class="line_item">
					<a href="{#:P(['trade'=>null])#}"
						class="f_item {#if condition='!$Request.param.trade'#}active{#/if#}">不限</a>
					<span>
						{#volist name="options_trade" id="vo"#}
						<a href="{#:P(['trade'=>$key])#}"
							class="f_item tradeLink {#if condition='$Request.param.trade==$key'#}active{#/if#}">{#$vo#}</a>
						{#/volist#}
					</span>
					<a href="javascript:;" class="f_item more toggleMore" style="display: none" data-type="tradeLink">
						<span>更多</span>
					</a>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
			</div>
			<div class="filter_selected" v-if="showSelected">
				<div class="filter_line so_condition last">
					<div class="line_title">已选条件：</div>
					<div class="fse_group">
						<a href="{#:P(['keyword'=>null])#}" class="s_tag" v-if="keyword">{{keyword}}</a>
						<a href="{#:P(['d1'=>null,'d2'=>null,'d3'=>null])#}" class="s_tag"
							v-if="d1">{{citySelectedText}}</a>
						<a href="{#:P(['nature'=>null])#}" class="s_tag" v-if="nature">{{natSelectedText}}</a>
						<a href="{#:P(['trade'=>null])#}" class="s_tag" v-if="trade">{{tradeSelectedText}}</a>
					</div>
					<div class="clear"></div>
					<a href="{#:url('index/company/index')#}" class="remove">清空条件</a>
				</div>
			</div>
		</div>
		<div class="content_box2 clearfix">
			<div class="left_sidebar">
				{#if condition="count($dataset.items) gt 0"#}
				{#volist name="dataset.items" id="vo"#}
				<div class="company_list clearfix">
					<div class="text_wrapper clearfix">
						<div class="company_img">
							<img src="{#$vo.logo_src#}">
						</div>
						<div class="company_text_wrapper">
							<div class="company_text1 clearfix" data-id="{#$vo.id#}">
								<a class="cn" href="{#:url('index/company/show',['id'=>$vo.id])#}"
									target="_blank">{#$vo.companyname#}</a>
								{#if condition="$vo.company_audit eq 1"#}
								<div class="ic1"></div>
								{#/if#}
								{#if condition="$vo.setmeal_icon!=''"#}
								<div class="ic2"><img class="setmeal_icon" src="{#$vo.setmeal_icon#}"></div>
								{#/if#}
							</div>
							<div class="company_text2">
								<p>
									<span class="border">{#$vo.nature_text#}</span>
									<span class="border">{#$vo.trade_text#}</span>
									<span class="border">{#$vo.scale_text#}</span>
								</p>
								<span class="address">{#$vo.district_text#}</span>
							</div>
							<p class="company_text3">在招职位 <span>（{#$vo.jobnum#}）</span></p>
						</div>
					</div>
					<div class="btn_wrapper">
						<button
							onclick="javascript:window.open('{#:url(\'index/company/show\',[\'id\'=>$vo.id])#}')">查看详情</button>
					</div>
				</div>
				{#/volist#}
				{#else#}
				<div class="list_empty">
					<div class="emp_text">暂时没有数据哦</div>
				</div>
				{#/if#}
				{#$pagerHtml#}
			</div>
			<div class="right_sidebar">
				<div class="right_box4 nmt">
					<div class="recommend">
						推荐企业
					</div>
					<div class="enterprise_list">
						{#if condition="count($hot_company_list) gt 0"#}
						{#volist name="hot_company_list" id="vo"#}
						<div class="enterprise_item clearfix">
							<div class="enterprise_img">
								<img src="{#$vo.logo_src#}">
							</div>
							<div class="enterprise_text">
								<p class="enterprise_text1"><a href="{#:url('index/company/show',['id'=>$vo.id])#}"
										target="_blank">{#$vo.companyname#}</a></p>
								<p class="enterprise_text2">在招职位<span class="color">({#$vo.jobnum#})</span></p>
							</div>
						</div>
						{#/volist#}
						{#else#}
						<div class="list_empty n_bd">
							<div class="emp_text">暂时没有推荐企业</div>
						</div>
						{#/if#}
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script>
	$(document).ready(function() {
		$(function() {
			var cityList = {},
				tradeList = {};
			var d1 = 0,
				d2 = 0,
				d3 = 0,
				trade = 0;
			var cityLevel = parseInt('{#$district_level#}');
			var subsite_district_level = parseInt('{#$subsite_district_level#}');
			var displayWordWidth = 870;

			// 筛选条件显示数量控制
			handleFilterConditionDisplay('cityLink');
			handleFilterConditionDisplay('tradeLink');

			function handleFilterConditionDisplay(className) {
				var showWidth = 0,
					$filterLink = $('.' + className);
				$filterLink.each(function(index, value) {
					if (showWidth > displayWordWidth) {
						$(this).hide();
						$('[data-type=' + className + ']').show();
					} else {
						$(this).addClass('sw');
						showWidth += value.clientWidth;
					}
				});
			}

			// ajax获取分类数据
			getClassify('citycategory');
			getClassify('trade');

			// 返回上一级
			$('.classifyReturn').click(function() {
				var thisType = $(this).data('type');
				if (thisType === 'cityReturn') {
					if (cityLevel === 3) {
						// 三级分类
						var returnArray = cityList.filter(function(item) {
							if (parseInt(item.value) === d1) {
								return item;
							}
						})[0].children;
						$('#cityLinkArea').html(generateList(returnArray, 2, thisType));
					} else {
						$('#cityLinkArea').html(generateList(cityList, 1, thisType));
						$('[data-type=cityReturn]').hide();
					}
					cityLevel = cityLevel - 1;
					if (subsite_district_level == cityLevel - 1) {
						$('[data-type=cityReturn]').hide();
					}
					handleFilterConditionDisplay('cityLink');
				}
			});

			// 返回上一级生成列表
			function generateList(data, level, type) {
				var listHtml = '';
				Object.values(data).forEach(function(item) {
					var listUrl = '';
					if (type === 'cityReturn') {
						if (level === 2) {
							listUrl = '{#:P([\'d1\'=>\'_d1_\',\'d2\'=>\'_d2_\',\'d3\'=>null])#}';
							listUrl = listUrl.replace('_d1_', d1);
							listUrl = listUrl.replace('_d2_', item.value);
						} else {
							listUrl = '{#:P([\'d1\'=>\'_d1_\',\'d2\'=>null,\'d3\'=>null])#}';
							listUrl = listUrl.replace('_d1_', item.value);
						}
						listHtml += '<a href="' + listUrl + '" class="f_item cityLink">' + item
							.label + '</a>';
					}
				});
				return listHtml;
			}

			// 显示和收起更多分类
			$('.toggleMore').click(function() {
				var className = $(this).data('type');
				if ($(this).hasClass('open')) {
					$(this).removeClass('open').find('span').html('更多');
					toggleClassify(className, true);
				} else {
					$(this).addClass('open').find('span').html('收起');
					toggleClassify(className, false);
				}
			});

			/**
			 * 显示和隐藏操作节点的公用方法
			 * @param className 节点类名
			 * @param num 可以显示的数量
			 * @param status 区分显示还是隐藏 true->需要隐藏
			 */
			function toggleClassify(className, status) {
				var num = $('.' + className + '.sw').length;
				$('.' + className).each(function(index) {
					$(this).show();
					if (status) {
						if (index > (num - 1)) {
							$(this).hide();
						}
					}
				});
			}

			// 获取分类数据
			function getClassify(type) {
				httpget(qscms.apiList.classify + '?type=' + type, {}).then(function(res) {
					if (res.code === 200) {
						if (type === 'citycategory') {
							cityList = res.data;
							d1 = parseInt('{#$Request.param.d1#}');
							d2 = parseInt('{#$Request.param.d2#}');
							d3 = parseInt('{#$Request.param.d3#}');
							if (cityLevel !== 1) {
								if (qscms.subsiteid > 0 && cityLevel == subsite_district_level +
									1) {
									$('[data-type=cityReturn]').hide();
								} else {
									$('[data-type=cityReturn]').show();
								}
							}
						} else if (type === 'trade') {
							tradeList = res.data;
							trade = parseInt('{#$Request.param.trade#}');
						}
					} else {
						console.log(res.message);
					}
				}).catch(function(err) {
					console.log(err);
				});
			}

			// 企业点击标题变色 start
			var isLoginLocal = localStorage.getItem('isLogin');
			var isLogin = window.qscms.isLogin;
			if (!isLogin == isLoginLocal) { //登录状态改变时清空缓存数据
				localStorage.setItem('selectArr', []); //职位
				localStorage.setItem('selectResumeArr', []); //简历
				localStorage.setItem('selectComArr', []); //企业
			}
			var selectArrComOnload = localStorage.getItem('selectComArr') == null || localStorage.getItem('selectComArr') == 'null' || localStorage.getItem(
				'selectComArr') == '' || localStorage.getItem(
				'selectComArr') == undefined ? [] : JSON.parse(
				localStorage.getItem('selectComArr'))
			preComlist()

			function preComlist() {
				for (let j of selectArrComOnload) {
					$(".company_text1").each(function() {
						if ($(this).context.dataset.id == j) {
							$(this).addClass('company_text_active')
						}
					});
				}
			}
			var selectComArr = selectArrComOnload
			$('.company_text1').click(function(e) {
				if (!$(this).hasClass('company_text_active')) {
					var select_id = e.currentTarget.dataset.id
					selectComArr.push(select_id)
					var selectComArrStr = JSON.stringify(selectComArr)
					localStorage.setItem('selectComArr', selectComArrStr)
					if (!$(this).hasClass('company_text_active')) {
						$(this).addClass('company_text_active')
					}
				}
			});
			// 企业点击标题变色 end
		});
	});
	var app = new Vue({
		el: '#app',
		data: {
			keyword: '{#$Request.param.keyword#}',
			d1: parseInt('{#$Request.param.d1#}'),
			d2: parseInt('{#$Request.param.d2#}'),
			d3: parseInt('{#$Request.param.d3#}'),
			cityLevel: parseInt('{#$district_level#}'),
			citySelectedText: '',
			nature: '{#$Request.param.nature#}',
			natSelectedText: '',
			trade: '{#$Request.param.trade#}',
			tradeSelectedText: '',
			showSelected: false,
		},
		mounted: function() {
			// 已选条件展示
			if (this.d1) {
				this.getClassify('citycategory'); // 地区
			}
			// 企业性质
			if (this.nature) {
				this.getClassify('companyNature');
			}
			// 行业类别
			if (this.trade) {
				this.getClassify('trade');
			}
			// 是否显示已选条件
			if (this.keyword || this.d1 || this.nature || this.trade) {
				this.showSelected = true;
			}
		},
		methods: {
			getClassify: function(type) {
				var _this = this;
				httpget(qscms.apiList.classify + '?type=' + type, {}).then(function(res) {
					if (res.code === 200) {
						if (type === 'citycategory') {
							var cityList = res.data;
							if (_this.d1) {
								if (_this.cityLevel === 2) {
									// 地区为二级
									_this.citySelectedText = cityList.filter(function(item) {
										if (parseInt(item.value) === _this.d1) {
											return item;
										}
									})[0].label;
								}
								if (_this.cityLevel === 3) {
									// 地区为三级
									var levelTwoList = cityList.filter(function(item) {
										if (parseInt(item.value) === _this.d1) {
											return item;
										}
									})[0].children;
									if (_this.d3) {
										var levelThreeList = levelTwoList.filter(function(item) {
											if (parseInt(item.value) === _this.d2) {
												return item;
											}
										})[0].children;
										_this.citySelectedText = levelThreeList.filter(function(item) {
											if (parseInt(item.value) === _this.d3) {
												return item;
											}
										})[0].label;
									} else {
										_this.citySelectedText = levelTwoList.filter(function(item) {
											if (parseInt(item.value) === _this.d2) {
												return item;
											}
										})[0].label;
									}
								}
							}
						} else if (type === 'trade') {
							var tradeList = res.data;
							_this.tradeSelectedText = tradeList.filter(function(item) {
								if (parseInt(item.id) === parseInt(_this.trade)) {
									return item;
								}
							})[0].name;
						} else if (type === 'companyNature') {
							var natureList = res.data;
							_this.natSelectedText = natureList.filter(function(item) {
								if (parseInt(item.id) === parseInt(_this.nature)) {
									return item;
								}
							})[0].name;
						}
					} else {
						console.log(res.message);
					}
				}).catch(function(err) {
					console.log(err);
				});
			},
		},
	});
</script>
